<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CNBLOG 查看文章</title>
    <link rel="shortcut icon" href="assets/images/logo.gif" type="image/x-icon"/>
    <!-- 优先引入第三方模块 -->
    <link rel="stylesheet" href="assets/js/libs/bootstrap3_3_7/css/bootstrap.css">
    <!-- 引入字体图标文件-->
    <link rel="stylesheet" href="assets/js/libs/font/demo.css">
    <link rel="stylesheet" href="assets/js/libs/font/iconfont.css">
    <!-- 引入自定义模块 -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/index.css">
    <!-- 引入markdown预览css样式文件-->
    <link rel="stylesheet" href="assets/js/libs/editor_md/css/editormd.preview.css">
    <link rel="stylesheet" href="assets/css/article_detail.css">
</head>
<body>
<!-- 页面100%宽度，设置基础背景样式 -->
<div class="my_page_container">

    <!-- 设置页头导航 -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="my_nav">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                        <img src="assets/images/logo.gif" alt="">
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="#"><i class="icon iconfont icon-shouye"></i> 首页 <span
                                class="sr-only">(current)</span></a></li>
                        <li class="active"><a href="main.html"><i class="icon iconfont icon-yonghu"></i> 我的主页</a></li>
                    </ul>
                    <form class="navbar-form navbar-left search-box">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="请输入关键词">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <i class="icon iconfont icon-icon-test"></i>
                                </button>
                            </span>
                        </div><!-- /input-group -->
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#" title="点击查看用户资料"><img src="assets/images/header/2.jpg" alt=""> 登录用户：大牧</a>
                        <li>
                            <a type="button" data-toggle="modal" data-target=".bs-example-modal-sm"><i
                                    class="icon iconfont icon-denglu-mima"></i> 登录</a>
                        </li>
                        <li>
                            <a type="button" data-toggle="modal" data-target=".bs-example-modal-sm"><i
                                    class="icon iconfont icon-zhuce"></i> 注册</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true"
                               aria-expanded="false"><i class="icon iconfont icon-yudingzhongxin"></i> 个人中心 <span
                                    class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#"><i class="icon iconfont icon-chakan"></i> 查看用户资料</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#"><i class="icon iconfont icon-xihuan"></i> 我喜欢的文章</a></li>
                                <li><a href="#"><i class="icon iconfont icon-favourited"></i> 我收藏的文章</a></li>
                                <li><a href="#"><i class="icon iconfont icon-lishijilu"></i> 我看过的文章</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="publish_md.html"><i class="icon iconfont icon-ziyuan"></i> 发表文章</a></li>
                                <li><a href="#" data-toggle="modal" data-target=".bs-subject-modal-sm"><i
                                        class="icon iconfont icon-shuji1"></i> 创建我的专题</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#"><i class="icon iconfont icon-tuichudenglu"></i> 退出系统</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div>
        </div><!-- /.container-fluid -->
    </nav>

    <!-- 页面主体 -->
    <div class="container my_container">
        <div class="row">
            <!-- TODO 预览文章 -->
            <div id="layout">
                <header>
                    <h1>Markdown转HTML的显示处理之自定义 ToC 容器</h1>
                    <div>
                        <span><img src="assets/images/header/2.jpg" alt=""><a href="#"> 大牧</a></span>
                        <span><i class="icon iconfont icon-favourited"></i> 收藏(1200)</span>
                        <span><i class="icon iconfont icon-xihuan"></i> 喜欢(2000)</span>
                        <span><i class="icon iconfont icon-xiaoxi1"></i> 评论(188)</span>
                    </div>
                </header>

                <!--                <div id="sidebar">-->
                <!--                    <h1>Table of Contents</h1>-->
                <!--                    <div class="markdown-body editormd-preview-container" id="custom-toc-container">#custom-toc-container</div>-->
                <!--                </div>-->
                <div id="test-editormd-view">
                    <textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>
                </div>
                <div id="test-editormd-view2">
                    <textarea id="append-test" style="display:none;">

###科学公式 TeX(KaTeX)

$$E=mc^2$$

行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。

$$\(\sqrt{3x-1}+(1+x)^2\)$$

$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$

$$X^2 > Y$$

#####上标和下标

上标：X&lt;sup&gt;2&lt;/sup&gt;

下标：O&lt;sub&gt;2&lt;/sub&gt;

##### 代码块里包含的过滤标签及属性不会被过滤

```html
&lt;style type="text/style"&gt;
body{background:red;}
&lt;/style&gt;

&lt;script type="text/javscript"&gt;
alert("script");
&lt;/script&gt;

&lt;iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen&gt;&lt;/iframe&gt;
```

#####Style

&lt;style&gt;
body{background:red;}
&lt;/style&gt;

&lt;style type="text/style"&gt;
body{background:red;}
&lt;/style&gt;

#####Script

&lt;script&gt;
alert("script");
&lt;/script&gt;

&lt;script type="text/javscript"&gt;
alert("script");
&lt;/script&gt;
                    </textarea>
                </div>
            </div>

        </div>

        <div class="row">
            <div class="bs-example" data-example-id="media-list">
                <div class="panel panel-default comment">
                    <div class="panel-heading">
                        <h4>评论列表</h4>
                    </div>
                    <ul class="media-list">
                        <li class="media">
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                                         src="assets/images/header/1.jpg"
                                         data-holder-rendered="true" style="width: 64px; height: 64px;">
                                </a>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">蓝水云烟</h4>
                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
                                    sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra
                                    turpis.</p>
                                <!-- Nested media object -->
                                <div class="media">
                                    <div class="media-left">
                                        <a href="#">
                                            <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                                                 src="assets/images/header/2.jpg"
                                                 data-holder-rendered="true" style="width: 64px; height: 64px;">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">[回复-蓝水云烟] 大牧</h4>
                                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
                                        sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus
                                        viverra
                                        turpis.
                                        <!-- Nested media object -->
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="#">
                                                    <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                                                         src="assets/images/header/1.jpg"
                                                         data-holder-rendered="true" style="width: 64px; height: 64px;">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">[回复-大牧] 蓝水云烟</h4>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
                                                ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
                                                tempus viverra turpis.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Nested media object -->
                                <div class="media">
                                    <div class="media-left">
                                        <a href="#">
                                            <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                                                 src="assets/images/header/3.jpg"
                                                 data-holder-rendered="true" style="width: 64px; height: 64px;">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">[回复-蓝水云烟] 小李子</h4>
                                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
                                        sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus
                                        viverra
                                        turpis.
                                    </div>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="panel panel-default comment-box">
                <div class="panel-heading">
                    <h3>给文章写点评论</h3>
                </div>
                <div class="panel-body">
                    <form>
                        <div class="form-group">
                            <textarea name="comment" id="comment" style="resize: none" class="form-control" cols="30"
                                      rows="10"></textarea>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-default btn-lg col-md-offset-11">发表评论</button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>


<div class="container-fluid page-footer">
    <div class="row">
        <ul class="list-inline">
            <li><a href="https://bootcss.com">Boostrap官网</a></li>
            <li><a href="https://www.jquery.com">jQuery官网</a></li>
            <li><a href="https://www.python.org">Python官网</a></li>
            <li><a href="https://www.mysql.com">MySQL官网</a></li>
            <li><a href="https://www.djangoproject.com">Django官网</a></li>
        </ul>
        <p>
            ©2012-2020 郑州ZZ0720班级 / CNBLOG / 沪ICP备11018329号-5
        </p>
        <p>
            Designed and built with all the love in the world by @mdo and @fat. Maintained by the core team with the
            help of our contributors.
        </p>
        <p>
            本项目源码受 MIT开源协议保护，文档受 CC BY 3.0 开源协议保护。
        </p>
    </div>
</div>

<!-- 网页中使用的模态框 -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="login">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">CNBLOG 会员登录</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 col-md-offset-2 control-label">账号</label>
                        <div class="col-sm-6">
                            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 col-md-offset-2 control-label">密码</label>
                        <div class="col-sm-6">
                            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-4 col-sm-6  ">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox"> 记住密码
                                </label>
                            </div>
                        </div>
                    </div>
                    <!--                    <div class="form-group">-->
                    <!--                        <div class="col-sm-offset-2 col-sm-10">-->
                    <!--                            <button type="submit" class="btn btn-default"></button>-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">登录</button>
            </div>
        </div>
    </div>
</div>


<!-- 创建专题的模态框-->
<div class="modal fade bs-subject-modal-sm" tabindex="-1" role="dialog" aria-labelledby="subject">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="mySubjectModalLabel">CNBLOG 创建专题</h4>
            </div>
            <form class="form-horizontal">
                <div class="modal-body">

                    <div class="form-group">
                        <label for="s_name" class="col-sm-2 col-md-offset-2 control-label">专题名称</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="s_name" placeholder="Email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="file" class="col-sm-2 col-md-offset-2 control-label">专题封面</label>
                        <div class="col-sm-6">
                            <input type="file" name="file" id="file" class="form-control">
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">创建专题</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- 引入JS模块 -->
<script src="./assets/js/libs/jquery2_1/jquery.js"></script>
<script src="./assets/js/libs/bootstrap3_3_7/js/bootstrap.js"></script>
<script src="./assets/js/apps/index.js"></script>
<script src="./assets/js/libs/font/iconfont.js"></script>

<script src="./assets/js/libs/editor_md/lib/marked.min.js"></script>
<script src="./assets/js/libs/editor_md/lib/prettify.min.js"></script>
<script src="./assets/js/libs/editor_md/lib/raphael.min.js"></script>
<script src="./assets/js/libs/editor_md/lib/underscore.min.js"></script>
<script src="./assets/js/libs/editor_md/lib/sequence-diagram.min.js"></script>
<script src="./assets/js/libs/editor_md/lib/flowchart.min.js"></script>
<script src="./assets/js/libs/editor_md/lib/jquery.flowchart.min.js"></script>
<script src="./assets/js/libs/editor_md/editormd.js"></script>
<script type="text/javascript">
    $(function () {
        var testEditormdView, testEditormdView2;

        $.get("test.md", function (markdown) {

            testEditormdView = editormd.markdownToHTML("test-editormd-view", {
                markdown: markdown,//+ "\r\n" + $("#append-test").text(),
                //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
                htmlDecode: "style,script,iframe",  // you can filter tags decode
                //toc             : false,
                tocm: true,    // Using [TOCM]
                tocContainer: "#custom-toc-container", // 自定义 ToC 容器层
                //gfm             : false,
                //tocDropdown     : true,
                // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
                emoji: true,
                taskList: true,
                tex: true,  // 默认不解析
                flowChart: true,  // 默认不解析
                sequenceDiagram: true,  // 默认不解析
            });
            // 获取Markdown源码
            //console.log(testEditormdView.getMarkdown());
            //alert(testEditormdView.getMarkdown());
        });

        testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", {
            htmlDecode: "style,script,iframe",  // you can filter tags decode
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true,  // 默认不解析
        });
    });
</script>
</body>
</html>